<template>
    <div v-if='info.Products.length>0'>
      <div class="mask" v-on:click='closeMask' :class='show?"transform3D":"leave3D"'></div>
      <div class="detailbox" :class='show?"transform3D":"leave3D"'>
        <div class="popcontainer">
          <img :src="info.Products[clid].ColorPic?info.Products[clid].ColorPic:info.MainColorPic">
          <div class="popright">
            <span class="font14">{{name}}</span>
            <div style="margin-top:5px;">
              <span style="font-size:12px;font-wight:bold;color:red;">￥</span>
              <span style="font-size:20px;font-wight:bold;color:red;">{{price}}</span>
            </div>
          </div>
        </div>
        <div class="line_spared"></div>
        <div class="choos_title">请选择颜色尺码</div>
        <div class="commodity_attr_list">
          <div class="attr_list" :class='clid == index?"attr_list_active":""' v-for='(item,index) in info.Products' @click='changeColor(index)'>{{item.Color}}</div>
        </div>
        <div class="list_scrool">
          <div class="detailcontainer">
            <div class="flex">颜色</div>
            <div class="flex">尺码</div>
            <div class="flex">购买数量</div>
          </div>
          <div class="detailcontainer" v-for='(item,index) in info.Products[clid].SizeList'>
            <div class="flex">{{info.Products[clid].Color}}</div>
            <div class="flex">{{item.Size}}</div>
            <div class="flex">
              <div class="stepper">
                <div class="normal" @click='reduce(index)'>-</div>
                <div class="normal num">
                  <input type="number" class="changenum" v-model='item.qty'>
                </div>
                <div class="normal" @click='plus(index)'>+</div>
              </div>
            </div>
          </div>
          <div class="title_choosed">已选择</div>
          <div class="choose_box" v-if='selectedArrList.length > 0'>
            <div class="choosed_list" v-for='(item,index) in selectedArrList'>{{item}}</div>
          </div>
        </div>
        <button class="check_btn" @click='addCarList'>{{fromType==1?"加入购物车":"保存"}}</button>
      </div>
    </div>
</template>

<script>
const imgutil = require('../../common/until.js')

import { Toast,Indicator,MessageBox } from 'mint-ui'

export default {
  name: 'detailChange',
  data(){
  	return {
      clid:0,
  	}
  },
  props: {
    fromType:{
      type: Number
    },
    show:{
      type:Boolean
    },
    info:{
      type: Object
    },
    name:{
      type:String
    },
    price:{
      type:String
    }
  },
  methods: {
    closeMask:function(){
      this.$emit('listShow',{})
      document.querySelector('body').style.overflow = 'auto'
    },
    changeColor: function(index){
      this.clid = index
    },
    reduce: function(index){
      if(this.info.Products[this.clid].SizeList[index].qty <=0){
        Toast('至少来一件吧')
      }else{
        this.info.Products[this.clid].SizeList[index].qty--
      }
    },
    plus: function(index){
      if(this.info.Products[this.clid].SizeList[index].qty >= this.info.Products[this.clid].SizeList[index].Stock){
        Toast('库存为'+this.info.Products[this.clid].SizeList[index].Stock+'件')
      }else{
        this.info.Products[this.clid].SizeList[index].qty++
      }
    },
    addCarList: function(){
      const that = this
      let dataObj = {itemId:that.info.ID,Products:[]}
      that.info.Products.map(item1 => {
        item1.SizeList.map(item2 => {
          let tempObj = {color:item1.Color}
          if(item2.qty>0){
            tempObj.size = item2.Size
            tempObj.qty = item2.qty
            dataObj.Products.push(tempObj)
          }
        })
      })
      if(dataObj.Products.length >0){
        if(that.fromType == 1){
          Indicator.open('加入购物车中')
          that.$http('/pinhuocart/addFromJson',dataObj,function(res){
            Indicator.close()
            if(res.Result){
              MessageBox.confirm('',{message: '是否马上结算？',title:'提示',confirmButtonText: '立即结算',cancelButtonText: '继续逛逛'}).then(action => {
                if(action == 'confirm') {
                  that.$router.push({
                    path: '/index/car'
                  })
                }
              }).catch(err => {
                if (err == 'cancel') {
                  console.log('123');
                }
              })
            }else{
              Toast(res.Message)
            }
          },'POST')
        }else if(that.fromType == 2){
          Indicator.open('修改商品中')
          that.$http('/pinhuocart/update',dataObj,function(res){
            Indicator.close()
            if(res.Result){
              that.$store.dispatch('addCarList')
            }else{
              Toast(res.Message)
            }
          },'POST')
        }
        that.closeMask()
      }else{
        Toast('亲，至少选择一件吧！')
        return
      }
    }
  },
  computed:{
    selectedArrList: function(){
      let arr = []
      this.info.Products.map(item1 => {
        let str = item1.Color + "："
        item1.SizeList.map(item2 => {
          if(item2.qty > 0){
            str = str + item2.Size + '/' + item2.qty +'件,'
          }
        })
        if(str == (item1.Color + "：")){

        }else{
          str = str.substr(0,str.length-1)
          arr.push(str)
        }
      })
      return arr
    }
  },
  created: function(){
   
  },
  mounted:function() {

  },
  components:{
  	
  }
}
</script>
<style scoped>
	.detailbox{left: 0;width: 100%;bottom:-80%;top:100%;background: #fff;z-index: 1100;position: fixed;}
  .mask{left: 0;top: 100%;right: 0;bottom: -100%;z-index: 199;background: rgba(0,0,0,.6);position: fixed;}
  .transform3D{transition: all .2s linear;transform: translateY(-100%);}
  .leave3D{transition: all .2s linear;transform: translateY(100%);}
  .popcontainer{width: 100%;display: flex;}
  .popcontainer img{height: 75px;width: 75px;margin:5px 15px 0;display: inline-block;}
  .popright{width: 250px;margin-top: 5px;display: inline-block;}
  .font14{font-size: 14px;}
  .line_spared{height: 1px;background: #f0f0f0;margin: 7px;}
  .choos_title{font-size: 14px;margin-left: 15px;}
  .commodity_attr_list{padding:10px;font-size: 14px;overflow: hidden;}
  .attr_list{float: left;padding: 5px;margin: 0 5px 5px;border: 1px solid #ececec;background: #ececec;color: #000;border-radius: 5px;}
  .attr_list_active{background: #be0000;color: #fff;border-color: #be0000;}
  .list_scrool{margin-top: 5px;overflow-y: scroll;height: 65%;}
  .detailcontainer {background: #f1f1f1;width: 100%;height:30px;display: flex;flex-flow: row wrap;justify-content: space-around;line-height: 30px;margin-top: 2px;}
  .flex{flex:1;text-align: center;font-size: 14px;}
  .stepper{display: inline-block;border: 1px solid #ccc;border-radius: 3px;height: 26px;margin: 0 auto;}
  .normal{width: 19px;line-height: 26px;text-align: center;float: left;}
  .num{width: 40px;height: 26px;line-height: 26px;text-align: center;border-left:1px solid #ccc;border-right:1px solid #ccc;}
  .changenum{color: #000;display: inline-block;text-align: center;width: 40px;height: 24px;line-height: 24px;font-size: 12px;border: none;outline: none;background: #f1f1f1;}
  .title_choosed{font-size: 14px;margin-left: 15px;margin-top: 10px;margin-bottom: 10px;}
  .choose_box{width: 90%;padding:2px 5px;margin: 0 auto;border: 1px solid red;color: red;}
  .choosed_list{line-height: 24px;font-size: 12px;}
  .check_btn{width: 90%;left: 5%;bottom: 10px;z-index: 202;position: absolute;padding: 10px;background: #c60a1e;font-size: 18px;border: none;outline: none;color: #fff;border-radius: 10px;}
</style>